<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1></h1>
    <button>点击获取用户信息</button>
    <input type="text" />
    <script>
      // const h1 = document.querySelector('h1')
      // const input = document.querySelector('input')
      // let obj = {
      //   name: '刘柏麟',
      //   age: 18
      // }
      // let obj1 = {}
      // for (let k in obj) {
      //   Object.defineProperty(obj1, k, {
      //     get() {
      //       return obj[k]
      //     },
      //     set(value) {
      //       obj[k] = value
      //       h1.innerHTML = obj[k]
      //     }
      //   })
      // }
      // h1.innerHTML = obj.name
      // const btn = document.querySelector('button')
      // btn.addEventListener('click', function() {
      //   obj1.name = '222222'
      // })
      // input.addEventListener('input', function(e) {
      //   console.log(e.target.value)
      //   obj1.name = e.target.value
      // })
      // 把目标对象变成代理对象
      // 参数一:user---->target目标对象
      // 参数二:handler ---> 处理器对象,用来监视数据,及数据的操作
      const obj = {
        name: '刘柏麟',
        age: 19
      }

      const obj1 = new Proxy(obj, {
        get(target, prop) {
          return Reflect.get(target, prop)
        },
        set(target, prop, value) {
          return Reflect.set(target, prop, value)
        },
        deleteProperty(target, prop) {
          return Reflect.deleteProperty(target, prop)
        }
      })
    </script>
  </body>
</html>
